<template>
  <li :class="{'save':(leafItem.customMenu && leafItem.customMenu.id)}" :functionCode="leafItem.uumsFunction.functionCode" class="leaf_li col-md-4" :title="leafItem.uumsFunction.functionName">
    <span class="star"></span>
    <label @click="openTab(
            leafItem.uumsFunction.functionName,
            leafItem.uumsFunction.functionUrl,
            leafItem.uumsFunction.pageEmbedType,
            leafItem.uumsFunction.functionCode,
            leafItem.uumsFunction.sourceSystem,
            leafItem.uumsFunction.parentFunction,
            INDEX_MENU_ACCESS
    )">{{leafItem.uumsFunction.functionName}}</label>
    <span>{{(leafItem.menuHotKey ? leafItem.menuHotKey.keyboardAscii : '') | toggleKeyNameOrAscii}}</span>
  </li>
</template>

<script>
  import {mapActions,mapState} from 'vuex';
    export default {
      name: "leaf-html",
      data(){
        return {
          className:{
            save:'save'
          }
        }
      },
      props:['leafItem'],
      methods:{
        openTab(functionName,functionUrl,pageEmbedType,functionCode,sourceSystem,parentFunction,INDEX_MENU_ACCESS){
          openTab(functionName,functionUrl,pageEmbedType,functionCode,sourceSystem,parentFunction,INDEX_MENU_ACCESS);
        },
        ...mapActions('menusStore',['SET_menuCodeMenuLeafs'])
      },
      computed:{
        ...mapState('menusStore',['menuCodeMenuLeafs','INDEX_MENU_ACCESS'])
      }
    }
</script>

<style scoped>

</style>
